<template>
  <div class="navs">
    <ul class="item">
      <li v-for="data in navData" :key="data.to" class="list">
        <router-link :to="data.to">{{data.label}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Navs",
  data() {
    return {
      navData: [
        { label: "博客首页", to: "/blogs/blog_index" },
        { label: "视频版块", to: "/blogs/blog_video" },
        { label: "美图分享", to: "/blogs/blog_photo" },
        { label: "node/技术", to: "/blogs/blog_skill/node" },
        { label: "vue/技术", to: "/blogs/blog_skill/vue" },
        { label: "css/技术", to: "/blogs/blog_skill/css" },
        { label: "js/技术", to: "/blogs/blog_skill/js" },
        { label: "html/技术", to: "/blogs/blog_skill/html" },
        { label: "其他/技术", to: "/blogs/blog_skill/other" }
      ]
    };
  }
};
</script>

<style lang="sass" scoped> 
@import '@/assets/default.sass'
.navs
  width: 100%
  background-color: #fff
  overflow: hidden
  .item
    width: 100%
    padding: 5px 0
    .list
      height: 38px
      overflow: hidden
      text-overflow: ellopsis
      white-space: nowrap
      padding: 1px 0
      >a
        @include flex(center,center)
        width: 100%
        height: 100%
        display: flex
        color: #707070
        transition: .3s
        &:hover
          background-color: #f44444
          color: #fff
          transition: .3s
      .router-link-active
        background-color: #f44444
        color: #fff
</style>